$(function () {
    //使用规律分析
    //----资源使用规律
    /**
     * Init
     *
     *
     * |--
     * |   `--
     * |   `--
     * |       `--
     * |           `--
     * |           `--
     * |               `--
     * |           `--
     * |--
     * |--
     */
    var ad = appData();

    DomNameStart()

    function DomNameStart() {

        //侧面添加class索引加载
        if (!$.getUrlParam("id")) {
            //$('.sys-sidebar ul li').eq(0).find('ul li ').eq(0).addClass('active')

            var name = $('.sys-sidebar').find('li .active a').text()
            $("#TopName").text(name) //替换头部日志名称
        }

        loadDom("SOURCE_LAW_TYPE", "#keyType", "")

        $("#tipName").text($("#keyType option").eq(1).text())


        //$.daterRangeDefine("#keyTime")

        $("#keyTime").daterangepicker({
            maxDate: moment().subtract(1, 'days').endOf('day'),
            ranges: {
                '昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                '最近7日': [moment().subtract(7, 'days'),moment().subtract(1, 'days')]
            }
        })


        $("#keyTime").attr('readonly', 'readonly').css('width', '340px')
        //setInitTime("#keyTime")
        $('#keyTime').val( moment().subtract('days', 7).format('YYYY-MM-DD')+' - '+moment().subtract('days', 1).format('YYYY-MM-DD'))

        //loadT($("#tipName").text())

        //		$("#tablefull").on('click',function(){
        //			if(!$(this).hasClass('open')){
        //				console.log(1)
        //
        //			}
        //
        //		})

    }

    function loadDom(api, id, val) {

        ad.selectList(api, {}, function (data) {
            var names = []
            var ids = []
            if (val == '') {
                $(id).empty()
            } else {
                $(id).empty().append("<option value='-1'> " + val + "</option>")
            }
            for (var i = 0; i < data.length; i++) {
                $(id).append("<option  value='" + data[i].id + "'>" + data[i].value + "</option>")
                names.push(data[i].value)
                //ids.push(""+data[i].id+"")
                ids.push(data[i].id.toString())
            }
            loadT({
                "id": $("#keyType").val(),
                "keyTime": $("#keyTime").val()
            })

            loadB({
                "id": $("#keyType").val(),
                "keyTime": $("#keyTime").val()
            })

            loadC({
                "id": $("#keyType").val(),
                "keyTime": $("#keyTime").val()
            })
            $("#tipName").text($("#keyType option").eq(1).text() + "流量")

            $("#showChart").on('click', function () {
                $("#tipName").text(names[ids.indexOf($(this).val())] + "流量")

                loadT({
                    "id": $("#keyType").val(),
                    "keyTime": $("#keyTime").val()
                })

                loadB({
                    "id": $("#keyType").val(),
                    "keyTime": $("#keyTime").val()
                })

                loadC({
                    "id": $("#keyType").val(),
                    "keyTime": $("#keyTime").val()
                })
            })

            $(id).find("option").eq(0).attr("selected", true)
        })

    }

    function loadT(param) {
        ad.selectList("SOURCE_DATA_T", param, function (data) {
            $("#bodyT").empty();

            $("#bodyT").append(`<tr>
                <td class="tdtit" style="width:40%">名称</td>
                  <td id="nameT">${data.name}</td>
                </tr>
                <tr>
                  <td class="tdtit">IP</td>
                  <td id="ipT">${data.ip}</td>
                </tr>
                <tr>
                  <td class="tdtit">重要度</td>
                  <td><label class="badge badge-gray" id="weightT">${data.weight}</label></td>
                </tr>
                <tr>
                  <td class="tdtit" id="tipName">访问次数</td>
                  <td>${data.flow}</td>
                </tr>
                <tr>
                  <td class="tdtit">风险事件</td>
                  <td><label class="label label-danger">高：${data.rank[0]}</label> <label class="label label-warning">中：${data.rank[1]}</label> <label class="label label-primary">低：${data.rank[2]}</label></td>
                </tr>`)

        })
    }

    function loadB(param) {
        ad.selectList("SOURCE_DATA_B", param, function (data) {
            $("#bodyB").empty();
            for (var i = 0; i < data.length; i++) {
                $("#bodyB").append(`<tr>
                  <td>${i + 1}</td>
                  <td title="${data[i].name}">${data[i].name}</td>
                  <td>${data[i].num}</td>
                </tr>`)
            }

        })
    }

    function loadC(param) {
        //Biao1-biao4
        ad.selectList("SOURCE_DATA_C", param, function (data) {
            var idNames = ['', 'chart2', 'chart3']
            option = {
                title: {
                    text: data[0].name
                },
                tooltip: {
                    trigger: 'item',
                    formatter: " {b} {a}: {c}",
                },
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                yAxis: {
                    data: data[0].ydata
                },
                xAxis: {},
                series: [{
                    name: '访问次数',
                    type: 'bar',
                    barWidth: 20,
                    data: data[0].xaxis
                }]
            };
            var myChart1 = echarts.init(document.getElementById('chart1'));
            myChart1.setOption(option, true);

            for (var i = 1; i < data.length; i++) {
                option = {
                    title: {
                        text: data[i].name
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} {a}: {c} ({d}%)'
                    },
                    series: [
                        {
                            name: 'IP数',
                            type: 'pie',
                            selectedMode: 'single',
                            selectedOffset: 10,
                            radius: ['42%', '55%'],
                            data: data[i].ydata
                        }
                    ]
                };
                var myCharts = echarts.init(document.getElementById(idNames[i]));
                myCharts.setOption(option, true);
            }
        })
        ad.selectList("SOURCE_DATA_D", param, function (data) {
            //biao5
            option4 = {
                title: {
                    text: data.datas[0].name
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: "{b} {a} : {c}  "
                },

                legend: {
                    data: ['读取', '写入']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.xAxis
                },
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    }
                    //min: 0.895,
                    //max: 1.05
                }],
//				dataZoom: [{
//					type: 'inside',
//					start: 50,
//					end: 100
//				}, {
//					show: false,
//					type: 'slider',
//					y: '90%',
//					start: 50,
//					end: 100
//				}],
                series: [{
                    name: '访问次数',
                    type: 'line',
                    lineStyle: {
                        normal: {
                            width: 2,
                        }
                    },
                    data: data.datas[0].data
                }]
            };
            var myChart4 = echarts.init(document.getElementById('chart4'));
            myChart4.setOption(option4, true);
        })

    }

    // $(".col-left .table thead tr th:gt(2),.col-left .table tbody > tr > td:gt(2)").hide();
    $(".col-left .table").find("tr").each(function () {
        $(this).children("th:gt(2),td:gt(2)").hide();
    })

    $("#tablefull").on('click', function () {
        if ($(this).hasClass("open")) {
            $(this).prop("class", "");
            $(".col-left .table").find("tr").each(function () {
                $(this).children("th:gt(2),td:gt(2)").hide();
            })
            $(".col-left").stop(true).animate({
                "width": '20%'
            }, 400);
            $(".col-right").stop(true).animate({
                "width": '80%',
                "display": "none"
            }, 400, function () {
                loadB({
                    "id": $("#keyType").val()
                })

                loadC({
                    "id": $("#keyType").val()
                })
                $(".col-right").show();
            });
        } else {
            $(this).prop("class", "open");
            $(".col-left .table").find("tr").each(function () {
                $(this).children("th:gt(2),td:gt(2)").show();
            })
            $(".col-left").stop(true).animate({
                "width": '100%'
            }, 400);
            $(".col-right").hide();
            stop(true).animate({
                "width": '0'
            }, 400);

        }
    });

    $(".scrollbar").mCustomScrollbar({
        autoHideScrollbar: true,
        advanced: {
            autoExpandHorizontalScroll: true
        }
    });

    $(".dropdown-menu li:eq(0)").on("click", function () {
        console.log($(this).parents(".open"));
        $(this).parents(".open").removeClass('open');
        $(".dialog").show();
    })

    $(".dropdown").on("click", "button", function () {
        $(this).parent().hasClass('open') ? $(this).parent().removeClass('open') : $(this).parent().addClass('open');
    })

    $(".dialog .close,#cancel").on("click", function () {
        $(".dialog").hide();
    })

    $(".table tr").on("click", "td:eq(2) a", function () {
        $(this).parents("tr").siblings().removeClass('active').end().addClass('active');
        $("#info").show()
    });
})